<template>
	<div>
		<el-container class="home-content">
		  <div class="home-index">
		    <!-- 左侧导航 -->
		    <el-aside class="index-left" style="width:225px;">
		      <!-- 左侧导航栏 -->
		      					<div class="one">
		      							<p style="height: 100px;">
		      								<img src="../../build/logo.png" class="img2" />
		      							</p>
		      							<p style="height: 20px;" class="p">
		      								窝窝头
		      							</p>
		      							<p style="height: 15px;" class="p1">
		      								暂未设置个人标签
		      							</p>
		      							<p style="height: 60px;" class="p2">
		      								<Button class="btn">去上课</Button>
		      							</p>
		      						<!-- 修改密码 -->
		      				<!-- 		<Modal title="修改密码" v-model="modal" width="60%">
		      							<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-position="labelPosition" class="xiugai">
		      								<FormItem label="新密码" prop="password">
		      									<Input v-model="formValidate.password" placeholder="至少6位密码，至多20位密码，区分大小写" prefix="ios-lock-outline" type="password"
		      									 password />
		      									</Input>
		      								</FormItem>
		      								<FormItem label="确认新密码" prop="aginer">
		      									<Input v-model="formValidate.aginer" placeholder="确认密码" prefix="ios-lock-outline" type="password"></Input>
		      								</FormItem>
		      								<FormItem label="验证码" prop="yzm">
		      									<div class="di">
		      										<Input v-model="formValidate.yzm" placeholder="请输入4位数验证码" prefix="ios-apps-outline">
		      										</Input>
		      										<Button>获取验证码</Button>
		      									</div>
		      								</FormItem>
		      								<FormItem prop="mail">
		      									<div class="di-two">
		      										<Button>保存</Button>
		      									</div>
		      								</FormItem>
		      							</Form>
		      						</Modal> -->

		      						<!-- 我的消息 -->
		      						<div class="tion">
		      							<Modal v-model="modal1" title="消息查看" width="70%">
		      								<div class="bodys">
		      									暂无数据
		      								</div>

		      							</Modal>
		      						</div>
		      						<Row>
		      							<Col span="12">
		      							<p style="height: 35px;" class="i1">
		      								<i class="el-icon-unlock" @click="modal = true">修改密码</i>
		      							</p>
		      							</Col>
		      							<Col span="12">
		      							<p style="height: 35px;" class="i">
		      								<i class="el-icon-message-solid" @click="modal1 = true">我的消息</i>
		      							</p>
		      							</Col>
		      						</Row>
		      					</div>
		      					<!-- 第二部分 -->
		      					<div class="two">
		      						 <ul class="ul" @select="changeRoute">
		      						     <router-link to="/personal"><li index="1"><i class="el-icon-user"><span>个人中心</span></i></li></router-link>
		      							<li index="2"><i class="el-icon-edit-outline"><span>添加考试</span></i></li>
		      							<li index="3"><i class="el-icon-collection"><span>添加课程</span></i></li>
		      							<li index="4"><i class="el-icon-folder-opened"><span>添加模板</span></i></li>
		      							<li index="5"><i class="el-icon-document"><span>添加计划</span></i></li>
		      							<li index="6"><i class="el-icon-data-analysis"><span>学习报告</span></i></li>
		      						</ul>
		      					</div>
		    </el-aside>
		    <!-- 中间内容 -->
		    <el-main style="margin-left: 3rem;margin-top: 0;padding: 0;">
		      <router-view></router-view>
		    </el-main>
		  </div>
		</el-container>
	</div>
</template>

<script>
// import http from '@/utils/HttpUtil.js'

	export default {
		data() {
			// eslint-disable-next-line camelcase
			      const validate_password = (rule, value, callback) => {
			        if (this.pas.password1) {
			          if (!value) {
			            callback(new Error('请确认您的密码'))
			          } else if (!(value === this.pas.password1)) {
			            callback(new Error('俩次输入的密码不一致'))
			          } else {
			            callback()
			          }
			        } else {
			          if (!value) {
			            callback(new Error('密码不能为空'))
			          } else {
			            callback()
			          }
			        }
			      }
			      const validateComfirmpwd = (rule, value, callback) => {
			        if (this.pas.password) {
			          if (!value) {
			            callback(new Error('请确认您的密码'))
			          } else if (!(value === this.pas.password)) {
			            callback(new Error('俩次输入的密码不一致'))
			          } else {
			            callback()
			          }
			        } else {
			          if (!value) {
			            callback(new Error('密码不能为空'))
			          } else {
			            callback()
			          }
			        }
			      }
						return{
			        activeName: 'first',
			        formLabelWidth:'10px',
			        dialog:false,
			        labelPosition: 'left',
			        flag: false,
			        activeIndex: '1',
			        name: '',
			        dialogFormVisible: false,
			        dialogVisible: false,
			        pas: {
			          password: '',
			          password1: '',
			          code: ''
			        },
			        active: {
			          updateSelfPassword: 'LearningPlatform/manager/user/updateSelfPassword'
			        },
			        rules: {
			          password: [{
			            required: true, trigger: 'blur', validator: validate_password
			          }],
			          password1: [{
			            required: true, trigger: 'blur', validator: validateComfirmpwd
			          }],
			          code: [{
			            required: true, message: '请输入验证码', tigger: 'blur'
			          }]
			        }

						}
					},
					components:{

					},
					methods:{
			      add() {
			        this.dialog=true
			      },
			     handleClick(tab, event) {
			              console.log(tab, event);
			     },
			     keep (refName) {
			       this.$refs[refName].validate((valid) => {
			         if (valid) {
			           const pas = this.pas
			           const param = (({password, code}) => ({
			             password, code
			           }))(pas)
			           // 发送请求，实现修改
			           http.xhrPost(this, this.active.updateSelfPassword, param, (res) => {
			             // 给出修改提示
			             this.$message({
			               type: 'success',
			               message: res.message
			             })
			             // 表单重置
			             this.$refs[refName].resetFields()
			           })
			         } else {
			           // 校验不通过
			           return false
			         }
			       })
			     }
					}
				}
			</script>

			<style scoped>
		*{
		      margin: 0px;
		      padding: 0px;
		   }
		   html,body,#app{
		     width: 100%;
		     height: 100%;
		   }
		   *, :after, :before {
		       box-sizing: border-box;
		   }
		  #home{
		    /* border: 1px solid #d7dde4; */
		    background: #f5f7f9;
		    position: relative;
		    border-radius: 4px;
		    overflow: hidden;
		    height: 100%;
		    -ms-flex-direction: column;
		    flex-direction: column;
		    display: -ms-flexbox;
		    display: flex;
		  }
		  /* 头部 */
		  .home-header{
		    height: .8rem;
		    z-index: 1;
		    box-shadow: 0 2px 3px rgba(0,0,0,.2);
		    background-color: #138bee;
		    padding: 0 50px;
		    height: 64px;
		    line-height: 64px;
		    flex: 0 0 auto;
		  }
		  .header{
		    line-height: .8rem;
		    color: #fff;
		    padding: 0 4%;
		  }
		  .header-nav{
		    height: .8rem;
		    line-height: .8rem;
		    color: #fff;
		    display: -ms-flexbox;
		    display: flex;
		  }
		  /* 图片 */
		  .header-logo{
		    margin-left: 3%;
		    /* margin-top:10px; */
		    width: 20%;
		    height: 100%;
		  }
		  img{
		    width: 68%;
		    height: auto;
		    border-style: none;
		    background-size: 100% 100%;
		    background-repeat: no-repeat;
		    vertical-align: middle;
		  }
		  /* 列表 */
		  .header-list{
		    /* border:1px solid red; */
		    width: 66%;
		    padding-right: 2%;
		    height: 64px;
		    margin-left: 30px;
		  }
		  .el-tabs__header {
		    padding: 0;
		    position: relative;
		    margin: 7px 0 15px;
		    color: #FFFFFF;
		  }
		  .el-tabs__active-bar {
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    height: 3px;
		    background-color: #fcc800;
		    z-index: 1;
		    margin:0px 0px;
		  }
		  .el-tabs__item.is-active {
		      color: #fcc800;
		  }
		  .el-tabs__item {
		    padding: 0 25px;
		    height: 40px;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    line-height: 40px;
		    display: inline-block;
		    list-style: none;
		    font-size: 14px;
		    font-weight: 500;
		    color: #FFFFFF;
		    position: relative;
		}
		  .el-tabs__nav-scroll {
		    overflow: hidden;
		}
		  .header-list ul{
		    height: 100%;
		    display: -ms-flexbox;
		    display: flex;
		    -ms-flex-align: center;
		    align-items: center;
		    -ms-flex-pack: justify;
		    justify-content: space-between;
		    list-style-type: none;
		  }
		  .header-list ul li{
		    cursor: pointer;
		    isplay: inline-block;
		    font-family: PingFangSC-Semibold;
		    line-height: .5rem;
		    font-size: 1.6rem;
		  }
		  .active{
		    color: #fcc800;
		    font-weight: 800;
		    border-bottom: .5rem solid #fcc800;
		    /* border-bottom-style:groove; */
		    padding-bottom: 10px;
		    text-align: center;
		    margin-top: 10px;
		  }
		  /* 用户 */
		  .header-user{
		    /* margin-left: 90px; */
		    /* border: 1px solid red; */
		    width: 250px;
		    /* padding-left: 10%; */
		    /* margin-left: 15%; */
		    height: 60px;
		    -ms-flex-align: center;
		    align-items: center;
		    -ms-flex-pack: justify;
		    justify-content: space-between;
		    display: -ms-flexbox;
		    display: flex;
		    padding: 0px 0px;
		  }
		  /* 线条 */
		  .header-user span{
		    font-family: PingFangSC-Regular;
		  }
		  .line{
		    width: 1px;
		    height: 30px;
		    opacity: 0.7;
		    background-color: #F5F5F5;
		  }
		  .user-details{
		    -ms-flex-align: center;
		    align-items: center;
		    display: -ms-flexbox;
		    display: flex;
		  }
		  /* 头像 */
		  .user-img{
		    width: 40px;
		    height: 38px;
		    font-size: 1.18rem;
		    text-align: center;
		    color: #138bee;
		    background-color: #fff;
		    border-radius: 50%;
		    /* margin-left: 10px; */
		  }
		  .user-img img{
		    width: 100%;
		    height: 100%;
		    background-size: 100% 100%;
		    background-repeat: no-repeat;
		    vertical-align: middle;
		    border-radius: 50%;
		    border-style:none;
		  }
		  .ivu-dropdown{
		    display: inline-block;
		    margin-left: 0.19rem;
		  }
		  .ivu-dropdown-rel{
		    position: relative;
		  }
		  .user-name{
		    padding-left:20px;
		    cursor: pointer;
		    font-family: PingFangSC-Regular;
		    font-size: 14px;
		  }
		  .ivu-icon{
		    /* border: 1px solid red; */
		    margin: 0;
		    font-size: 14px;
		    display: inline-block;
		    font-family: Ionicons;
		    speak: none;
		    font-style: normal;
		    font-weight: 800;
		    font-variant: normal;
		    text-transform: none;
		    text-rendering: auto;
		    line-height: 1;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		    vertical-align: middle;
		    color: #f5f5f5;
		  }
		.ivu-icon:before{
		  content: "\F116";
		}
		/* 中间内容 */
		.home-content {
		  /* border: 1px solid red; */
		  width: 100%;
		  height: 100%;
		  overflow-y: auto;
		  padding: 1.5rem 10.5% 0;
		}
		.home-index{
		  display: flex;
		  width: 1130px;
		  height: 1700px;
		}
		/* 左部 */
		.index-left{
		  width: 20%;
		  -ms-flex-direction: column;
		  flex-direction: column;
		  display: flex;
		}
		/* 个人头像 */
		.left-user{
		  height: 253px;
		  /* border: 1px solid saddlebrown; */
		  text-align: center;
		  width: 100%;
		  background-color: #fff;
		}
		/* 图片 */
		.left-img{
		  width: 224px;
		  height:112px;
		}
		.left-img img{
		  margin-top: 15px;
		  width: 74px;
		  height: 74px;
		  border-radius: 50%;
		  background-size: 100% 100%;
		  background-repeat: no-repeat;
		  vertical-align: middle;
		  border-style: none;
		}
		/* 姓名 */
		.left-content{
		  /* border: 1px solid blue; */
		  width: 224px;
		  height: 77px;
		}
		.content-name{
		  font-family: PingFangSC-Semibold;
		  font-size: 1.5rem;
		  font-weight: 700;
		  color: #333;
		}
		.content-title{
		  font-family: PingFangSC-Regular;
		  padding: 0 .3rem;
		  font-size: 1.12rem;
		  color: #999;
		  text-overflow: ellipsis;
		  overflow: hidden;
		  white-space: nowrap;
		}
		.content-class{
		  width: 67%;
		  height: 25px;
		  margin: .15rem auto 0;
		  padding: 0.6rem .16rem;
		  color: #fff;
		  font-size: 1.14rem;
		  cursor: pointer;
		  text-align: center;
		  border-radius: .5rem;
		  display: inline-block;
		  font-family: PingFangSC-Regular;
		  background-image: linear-gradient(-90deg,#1c5edc,#1a99f9);
		  font-family: PingFangSC-Regular;
		  margin-top: 10px;
		}
		.left-message{
		  /* border: 1px solid red; */
		  width: 224px;
		  height: 6px;
		  margin-top: 2rem;
		  padding: 1.5rem 0;
		  line-height: 6px;
		  display: -ms-flexbox;
		  display: flex;
		  border-top: .01rem solid #f0f0f0;
		}
		.left-message p:first-child{
		  border-right: .01rem solid #f0f0f0;
		  margin-top: -14px;
		}
		.el-button--text {
		    font-size: 1.16rem;
		    color: #666;
		    background: 0 0;
		    padding-left: 0;
		    padding-right: 0;
		}
		.left-message p{
		  font-size: 1.16rem;
		  color: #666;
		  width: 50%;
		  font-family: PingFangSC-Regular;
		}
		.left-message p .iconfont {
		  font-size: 1.16rem;
		  margin-right: .05rem;
		 }
		 .iconfont {
		  font-family: iconfont!important;
		  font-size: 16px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		 }
		 .iconpassword:before {
		     content: "\E620";
		 }
		.iconfont span{
		  cursor: pointer;
		}
		.left-message p:nth-child(2):before{
		  margin-left: -60px;
		  content: '|';
		}
		.left-message p:nth-child(2) .iconfont {
		    vertical-align: middle;
		    color: #ffc700;
		}
		.iconremind_fill:before {
		    content: "\E71F";
		}
		/* 左边第二部分 */
		.left-nav{
		  /* border: 1px solid green; */
		  flex: 1;
		  width: 100%;
		  margin-top: .9rem;
		  background-color: #fff;
		}
		/* 无序列表 */
		.left-nav{
		  height: 308px;
		  padding-top: 2.18rem;
		  list-style-type: none;
		}
		.left-nav ul li{
		  display: block;
		  font-family: PingFangSC-Regular;
		  line-height: 21px;
		  padding-right: 3rem;
		  margin-bottom: 0.35rem;
		  font-size: 14px;
		  border-left: .28rem solid #fff;
		  color: #151515;
		  margin-left: -11px;
		}
		.left-nav ul .li-active{
		  color: #3477f4;
		  border-left-color: #fcc800;
		}
		.left-nav ul li .iconfont {
		  font-size: .18rem;
		  margin-right: .05rem;
		}
		/* 右边部分 */
		.index-right{
		  overflow: hidden;
		  /* border: 1px solid black; */
		  width: 100%;
		  height: 100%;
		}
		.right-personal{
		  /* border: 1px solid blue; */
		  width: 124%;
		  height: 100%;
		  padding-left: 20px;
		}


		.el-dialog__title {
		    line-height: 22px;
		    font-size: 16px;
		    color: #000000;
		    text-align: left;
		    float:left;
		}
		h1 {
		    font-size: 2em;
		    margin: .67em 0;
		    text-align: center;
		    vertical-align: middle;
		    margin-top:80px;
		}
		.dialog{
		  border: 1px solid #c9c9c9;
		  border-radius: 10px;
		}

			</style>
